<template>
  <div class="graph-config-container">
    <a-tooltip title="放大">
      <a-icon type="zoom-in" @click="zoom(0.2)" />
    </a-tooltip>
    <a-tooltip title="缩小">
      <a-icon type="zoom-out" @click="zoom(-0.2)" />
    </a-tooltip>
    <a-tooltip title="撤销">
      <a-icon type="undo" @click="undo()" />
    </a-tooltip>
    <a-tooltip title="取消撤销">
      <a-icon type="redo" @click="redo()" />
    </a-tooltip>
    <a-tooltip title="导出svg">
      <a-icon type="export" @click="saveToSvg()" />
    </a-tooltip>
    <a-tooltip title="导出png">
      <a-icon type="picture" @click="saveToPng()" />
    </a-tooltip>
    <a-tooltip title="清空">
      <icon-fonts icon="icon-clear" @change="clear()"></icon-fonts>
    </a-tooltip>
    <a-tooltip title="保存流程">
      <a-icon type="save" @click="saveNodeData()" />
    </a-tooltip>
  </div>
</template>

<script>
import { Graph, DataUri } from "@antv/x6";
export default {
  name: "GraphConfigContainer",
  props: {
    graph: Graph,
  },
  methods: {
    //放大、缩小
    zoom(command) {
      this.graph.zoom(command);
    },

    //撤销
    undo() {
      this.graph.history.undo();
    },

    //取消撤销
    redo() {
      this.graph.history.redo();
    },

    //保存成svg图片
    saveToSvg() {
      this.graph.toSVG((dataUri) => {
        // 下载
        DataUri.downloadDataUri(DataUri.svgToDataUrl(dataUri), "chart.svg");
      });
    },

    //保存成png图片
    saveToPng() {
      this.graph.toPNG((dataUri) => {
        // 下载
        DataUri.downloadDataUri(dataUri, "chart.png");
      });
    },

    //清空
    clear() {
      this.graph.clearCells();
    },

    //保存节点数据
    saveNodeData() {
      this.$emit("onSave");
    },
  },
};
</script>

<style lang="less" scoped>
.graph-config-container {
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  height: 35px;
  width: 100%;
  /deep/.anticon {
    cursor: pointer;
    font-size: 18px;
    margin-right: 20px;
  }
}
</style>
